<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的常用指令</title>
    <style>
      .first{
        color: red;
      }
      .second{
        font-size: 50px;
      }
    </style>
</head>
<body>

    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 1.胡子语法 插值语法 mustache语法 -->
        <p>{{msg}}</p>
        <!-- 2. v-once 只渲染一次 -->
        <p v-once>{{msg}}</p>
        <!-- 3. v-pre 取消渲染 -->
        <p v-pre>{{msg}}</p>
        <!-- 4. v-text 在DOM内部插入文本内容，v-text会更新DOM元素中原本的内容。 -->
        <p v-text="message">我是{{msg}}。。。</p>
        <!-- 5. v-html 在DOM内部插入html内容，如果内容中包含html标签，则会html标签识别并一起更新DOM元素中原本的内容。 -->
        <p v-html="myHtml">我是{{msg}}。。。</p>

        <!-- 6.v-bind 绑定属性-->
        <!-- info.html 我的个人信息 -->
        <!-- 'v-bind' 语法糖 就是简写 是':' -->
        <a :href="myurl">个人信息</a>

        <!-- v-bind还可以用对象去绑定属性 举例：动态的绑定class属性 -->
        <p v-bind:class="{first:isFirst,second:isSecond}">第一行{{msg}}</p>
        <!-- 可以用函数去绑定但其实绑的是对象 -->
        <p v-bind:class="getClass()">第二行{{msg}}</p>

      

    </div>

    
    <script>

      let app = new Vue({
        el:"#app",
        data:{ 
          msg:'hello world',
          message:'大标题',
          myHtml:'<h1>大标题</h1>',
          myurl:'3-1.html',
          isFirst:true,
          isSecond:false
        },
        methods:{
          getClass(){
            return {first:this.isFirst,second:this.isSecond}
          }
        }
      })
        

    // el ??? 声明根 祖宗
    // data Vue 实例的数据对象

    console.log(app.msg); // 全局变量
    console.log(app.$data.msg) // $data 或者类似的这样的变量 一般是vue内置的属性
    app.$url = 'www.xxx.sss'
    

    </script> 
</body>
</html>